$.fn.gridAnimate = function(options) {
	var opts = $.extend({
		speed:200,
		girdItem:'div',
		expandEleWidth:500,
		paddingWidth:15,
		itemWidth:380,
		itemHeight:250
	},options);
	
	var gridEle = $(this),
	gridStyleArray = [],
	expandEleWidth = opts.expandEleWidth,
	paddingWidth = opts.paddingWidth,
	gridEleWidth = opts.itemWidth * 3 + paddingWidth * 2,
	gridItemWidth = opts.itemWidth,
	gridItemHeight = opts.itemHeight,
	expandHeight = opts.itemHeight * 2 + paddingWidth,
	flag = $(window).width() > gridEleWidth ? false : true
	
	$(window).resize(function(){
		if($(window).width() > gridEleWidth && flag){
			flag = false
			gridEle.each(function() {
				animateFunc($(this));
			});
		}else if($(window).width() < gridEleWidth){
			flag = true
			gridEle.removeAttr('style')
			gridEle.children(opts.girdItem).removeAttr('style').unbind()
		}
	});
	
	var animateFunc = function(grid) {
		
		var gridChilds = grid.children(opts.girdItem)
		
		grid.css({
			'position':'relative',
			'height': (gridItemHeight + paddingWidth) * 2,
			'width': gridEleWidth
		})
		
		gridChilds.each(function(index){
			var tempLeft = 0,
			tempTop = 0,
			tempStyle = {
				'margin':'0 ' + paddingWidth + 'px ' + paddingWidth + 'px 0',
				'position':'absolute',
				'overflow':'hidden',
				'float': 'left',
				'height':gridItemHeight,
				'width':gridItemWidth,
				'left':tempLeft + (gridItemWidth + paddingWidth) * (index % 3),
				'top':tempTop + (gridItemHeight + paddingWidth) * Math.floor(index / 3)
			}
			$(this).css(tempStyle)
			gridStyleArray.push(tempStyle)
		})
		
		function restoreShape(){
			gridChilds.each(function(index){
				$(this).stop(true,true).animate({
					width:gridStyleArray[index].width,
					height:gridStyleArray[index].height,
					left:gridStyleArray[index].left,
					top:gridStyleArray[index].top
				},opts.speed);
			})
		}
		
		//box1
		gridChilds.eq(0).hover(function(event){
			var changeWidth1 = (gridEleWidth - expandEleWidth - paddingWidth * 2) / 2,
			changeWidth2 = (gridEleWidth - expandEleWidth - paddingWidth * 3) / 3
			gridChilds.eq(0).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:expandEleWidth + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:expandEleWidth + changeWidth1 + paddingWidth * 2,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth * 2 + changeWidth2,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth * 3 + changeWidth2 *2,top:gridItemHeight + paddingWidth},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
		
		//box3
		gridChilds.eq(2).hover(function(event){
			var changeWidth1 = (gridEleWidth - expandEleWidth - paddingWidth * 2) / 2,
			changeWidth2 = (gridEleWidth - expandEleWidth - paddingWidth * 3) / 3
			gridChilds.eq(0).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeWidth1 + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:gridEleWidth - expandEleWidth,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:"0px",top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:changeWidth2 + paddingWidth,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:(changeWidth2 + paddingWidth) * 2,top:gridItemHeight + paddingWidth},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
		
		//box4
		gridChilds.eq(3).hover(function(event){
			var changeWidth1 = (gridEleWidth - expandEleWidth - paddingWidth * 2) / 2,
			changeWidth2 = (gridEleWidth - expandEleWidth - paddingWidth * 3) / 3
			gridChilds.eq(0).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth * 2 + changeWidth2,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:expandEleWidth + paddingWidth * 3 + (changeWidth2) *2,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:expandEleWidth + paddingWidth,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:expandEleWidth + (changeWidth1) + paddingWidth * 2,top:gridItemHeight + paddingWidth},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
		
		//box6
		gridChilds.eq(5).hover(function(event){
			var changeWidth1 = (gridEleWidth - expandEleWidth - paddingWidth * 2) / 2,
			changeWidth2 = (gridEleWidth - expandEleWidth - paddingWidth * 3) / 3
			gridChilds.eq(0).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:changeWidth2 + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:(changeWidth2 + paddingWidth) * 2,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:"0px",top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeWidth1 + paddingWidth,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:gridEleWidth - expandEleWidth,top:"0px"},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
		
		//box2
		gridChilds.eq(1).hover(function(event){
			var changeLeft = gridItemWidth + expandEleWidth + paddingWidth * 2,
			changeWidth1 = gridEleWidth - changeLeft,
			changeWidth2 = (gridEleWidth - (expandEleWidth + changeWidth1 + paddingWidth *3)) / 2
			gridChilds.eq(0).stop(true,true).animate({width:gridItemWidth,height:gridItemHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:gridItemWidth + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeLeft,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:"0px",top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:changeWidth2 + paddingWidth,top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeLeft,top:gridItemHeight + paddingWidth},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
		
		//box5
		gridChilds.eq(4).hover(function(event){
			var changeLeft = gridItemWidth + expandEleWidth + paddingWidth * 2,
			changeWidth1 = gridEleWidth - changeLeft,
			changeWidth2 = (gridEleWidth - (expandEleWidth + changeWidth1 + paddingWidth *3)) / 2
			gridChilds.eq(0).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:"0px",top:"0px"},opts.speed);
			gridChilds.eq(1).stop(true,true).animate({width:changeWidth2,height:gridItemHeight,left:changeWidth2 + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(2).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeLeft,top:"0px"},opts.speed);
			gridChilds.eq(3).stop(true,true).animate({width:gridItemWidth,height:gridItemHeight,left:"0px",top:gridItemHeight + paddingWidth},opts.speed);
			gridChilds.eq(4).stop(true,true).animate({width:expandEleWidth,height:expandHeight,left:gridItemWidth + paddingWidth,top:"0px"},opts.speed);
			gridChilds.eq(5).stop(true,true).animate({width:changeWidth1,height:gridItemHeight,left:changeLeft,top:gridItemHeight + paddingWidth},opts.speed);
			event.stopPropagation();    //  阻止事件冒泡
		},function(event){
			restoreShape();
		})
	};
	return gridEle.each(function() {
		if($(window).width() > gridEleWidth) animateFunc($(this));
	});
}
